<template>
    <div class="loginWarp">
        <div class="login flex-center">
            <el-form class="login-form">
                <h1 class="fw900 color-#000">欢迎使用</h1>
                <h3 class="mb15px fw900 color-#000">当前设备未授权或授权已过期</h3>
                <h3 class="mb15px fw900 color-#000">请通过下方按钮重新上传授权</h3>

                <el-form-item style="width: 100%" class="mt30px">
                    <el-button size="large" type="primary" style="width: 100%" @click="handleGet">
                        <span>下载授权申请文件</span>
                    </el-button>
                </el-form-item>
                <el-form-item style="width: 100%">
                    <el-upload class="upload-demo" style="width: 100%" :action="actionUrl" :limit="1"
                        :show-file-list="false" :before-upload="beforeUpload" v-if="!loading">
                        <el-button type="primary" size="large" style="width: 100%"
                            :loading="loading">上传授权许可文件</el-button>
                    </el-upload>
                    <el-button type="primary" size="large" style="width: 100%" :loading="loading"
                        v-else>上传中。。。</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>
<script setup lang="tsx">
import { useRouter } from "vue-router";
import { UploadRawFile } from "element-plus";
import { uploadLicense } from '@/api/license'
import { Awaitable } from "element-plus/es/utils/typescript";
import { ElMessage } from 'element-plus'
const router = useRouter();
const loading = ref(false);
const actionUrl: string = import.meta.env.VITE_UPLOAD_URL
const handleGet = (): void => {
    const link = document.createElement("a");
    link.href = "/admin-api/gateway/export/reqx";
    link.download = ""
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
};

const beforeUpload = (rawFile: UploadRawFile): Awaitable<void | undefined | null | boolean | File | Blob> => {
    loading.value = true;
    const formData = new FormData();
    formData.append("file", rawFile);
    uploadLicense(formData).then(res => {
      if(res.code === 200){
        router.push('/')
        ElMessage.success("许可上传成功")
      }
    })
    return false;
};
</script>
<style lang="scss" scoped>
.loginWarp {
    height: 100%;
    background-image: url("@/assets/imgs/bg.webp");
    background-size: cover;

    .login {
        height: 100%;
        width: 500px;
        position: fixed;
        display: flex;
        justify-content: center;
        align-items: center;
        right: 0px;
        top: 0px;
        background: #ffffffa8;
        backdrop-filter: blur(6px);
    }
}

.title {
    margin: 0px auto 30px auto;
    text-align: center;
    color: #707070;
}

.login-form {
    border-radius: 6px;
    width: 400px;

    :deep(.el-input) {
        height: 40px;
        background: rgba(0, 0, 0, 0);

        .el-input__wrapper,
        input {
            background: rgba(0, 0, 0, 0);
            height: 40px;
        }
    }

    .input-icon {
        height: 39px;
        width: 14px;
        margin-left: 0px;
    }
}

.login-tip {
    font-size: 13px;
    text-align: center;
    color: #bfbfbf;
}

:deep(.el-upload--text) {
    width: 100%;
}
</style>
